* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}

.container {
    $size: 60px;
    $gap: 20px;

    width: fit-content;
    display: grid;
    grid-template: repeat(4, 1fr) / repeat(7, 1fr);
    margin: 50px auto;
    gap: $gap;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 20px;

    .piano-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: $size;
        height: $size;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
        &:nth-child(even) {
            background-color: #ccc;
        }
        &:nth-child(odd) {
            background-color: #666;
            color: #fff;
        }
    }
}

